<template>
	<div class="approvalView" v-if="shows">
			<van-pull-refresh v-model="isLoading" :style="{height:refreshHeight}" @refresh="onRefresh">
				<van-list v-model="loading" ref="list3" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check='false'>
					<ul class="list">
						<li v-for="item in fromDataList" @click="goPush(item.form_big_id,item.num)">
							<div class="list-box1">
								<div class="list_title">{{item.workflow_name}}{{item.num}}</div>
								<div :style="{'color':allColor.wait_list_icon_color}" class="colors">
								<van-icon name="clock"/>
								{{item.system_handle_status }}</div>
							</div>
							<div class="list-box2">
								<div class="list-title-min work-flow">{{item.system_workflow_status}}：<p>{{item.system_current_changer_name | s_name}}</p></div>
								<div class="list-title-min time">{{item.commit_time}}</div>
							</div>
						</li>
					</ul>
				</van-list>
			</van-pull-refresh>
	</div>
</template>

<script>
	import { approvalList } from '@assets/js/mixins/approvalList.js'
	import {getForm2} from '@request/api.js'
	import { pHeight } from '@assets/js/height.js'
	export default {
		mixins: [approvalList],
		data() {
			return {
				fromDataList:[],
				downLoad:true,
				loading:false,
				finished:false,
				isLoading:false,
				refreshHeight:'auto',
				shows:true,
				stop:true,
				obj:{
					'_page':1,
					'_pagesize':20,
					'_url': 'apply1',
					'party':this.$store.state.third_name
				}
			}
		},
		// beforeRouteEnter(to, from, next) {
		// 	if(from.name === 'approval' || from.name === 'waitapproval' || from.name === 'complete' || from.name === 'home' || from.name === 'approvalInput'){		
		// 		next(vm => {
		// 		     vm.getList()
		// 		  })
		// 	}else{
		// 		next(vm => {
		// 			vm.$nextTick(()=>{
		// 				vm.$refs.list3.scroller.scrollTop = vm.$store.state.carrerTouScroll.height3
		// 			})				     
		// 		  })			
		// 	}
		// 	next()
		// },
		// beforeRouteLeave(to, from, next) { 		
		// 	if (to.name === 'approvalDetails') {
		// 		let scrollTop = this.$refs.list3.scroller.scrollTop
		// 		this.$store.commit('setCarrerTouScroll3', scrollTop)
		// 	} else {
		// 		this.$store.commit('setCarrerTouScroll3', 0)				
		// 	}
		// 	next()
		// },
		methods:{
			goPush(fromId,num){
				this.$router.push({
					path:'/approvalDetails',
					query:{					
						'fromId':fromId,
						'num':num,
						'status':'apply'
					}
				})
			},
			onLoad(){
				setTimeout(()=>{
					if(this.stop && this.downLoad){
						this.upList()
						this.stop = false
					}			
				},500)
			},
			upList(){
				  this.obj._page++
				　getForm2(this.obj).then(res=>{
						if(res.code === 0){
							this.$store.commit('changTotal2', res.total)
							res.data.forEach(item =>{
							  this.fromDataList.push(item)
							})
							// 加载状态结束
							this.loading = false;
							this.stop = true					
							if (this.fromDataList.length >= res.total) {
							    this.finished = true;	
								return false
							}
						}				
					})　				
			},
			onRefresh(){
				this.downLoad = false
				this.obj._page = 1
				this.finished = false
				setTimeout(()=>{
					this.getList()
				},500)
			},
			getList(){
				getForm2(this.obj).then(res=>{
					if(res.code === 0){
						this.$store.commit('changTotal2', res.total)
						this.fromDataList = res.data							
						// list高度
						if(this.$refs.list3){
							this.$nextTick(()=>{
								let refresh = this.$refs.list3.$el.offsetHeight						
								const val = pHeight(refresh)
								if(val !== 'kong'){
									this.refreshHeight = val+'px'
								}else{
									this.shows =false
									this.refreshHeight = 'atuo'
									setTimeout(()=>{
										this.shows =true
									},0)
									this.shows =true
								}
							})	
						}										
						// 加载状态结束
						this.isLoading = false;
						this.downLoad = true
						if (this.fromDataList.length >= res.total) {
						  this.finished = true;		
						  return false
						}
					}				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-flow p {
		display: inline-block;
	}
	@import '@assets/css/commont.scss'
</style>
